<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/common.css?01_24" />
		<link rel="stylesheet" type="text/css" href="../css/templet.css?01_24" />
		<link rel="stylesheet" type="text/css" href="../fonts/font-awesome.min.css?01_24" />
		<link rel="stylesheet" type="text/css" href="../mui/css/mui.css?01_24" />

		<!--公共js-->
		<script type="text/javascript" src="../common/js/jquery.js?01_24"></script>
		<script type="text/javascript" src="../common/js/fastclick.js?01_24"></script>
		<script type="text/javascript" src="../common/js/common.js?01_24"></script>
		<script type="text/javascript" src="../common/js/my_common.js?01_24"></script>
		<script type="text/javascript" src="../common/js/main.js?01_24"></script>
		<script type="text/javascript" src="../common/js/app.js?01_24"></script>
		<!--插件-->
		<script type="text/javascript" src="../common/js/vue.min.js?01_24"></script>
		<script type="text/javascript" src="../common/js/mui.min.js?01_24"></script>
	</head>

	<body>
		<header class="bg-red9 fff f-20 pad-t-10 pad-b-10 pad-l-10 pad-r-10">
			<div class="pa back re" onclick="back();">
				<a></a>
				<div class="order_back"></div>
			</div>
			<div class="center" data-l="1388"></div>
		</header>
		<div class="wrap_body write_off_record" id="app" v-cloak>
			<div class="content pad-t-45">
				<!--有记录-->
				<div class="have_record" v-if="list.length>0">

					<div class="list">

						<div class="bank10"></div>
						<div class="item  pad-l-10 pad-r-10 bg-fff pad-t-10 pad-b-10" v-for="item in list">
							<dl class="fiex pad-b-10">
								<dt class=" pad-r-15">
									<img v-if=" item.headimgurl!='' " id="image" :src="item.headimgurl" class="icon"/>
									<img v-else id="image" alt="用户头像" :src="con_img" class="icon ccc" onerror="lod(this)"/>
									<!--<img src="../images/coupon/icon.png" alt="" class="icon"/>-->
								</dt>
								<dd class="fiex1">
									<p class="c999">
										<span class="f-13">{{item.username}}</span>
										<span class="bg"></span>
										<span class="fr">{{item.use_time}}</span>
									</p>
									<p class="f-15">{{item.name}}</p>
									<p class="f-15"><span>No:</span><span> {{item.id}}</span></p>
								</dd>
							</dl>
							<div class="fiex f-13 pad-t-5 pad-b-5 detail">
								<div class="red9 pad-l-30 pad-r-30" v-if="languageStyle == 'zh'">{{item.discount}}%</div>
								<div class="red9 pad-l-30 pad-r-30" v-else>{{100-item.discount}}% off</div>
								<div class="fiex1">
									<p>{{item.username}}</p>
									<p class="red9">满{{item.condition}}可用</p>
								</div>
							</div>
						</div>

						<div class="bank10"></div>
					</div>

				</div>

				<!--无记录-->
				<div class="no_record center pa" v-else>
					<p class="bg"></p>
					<p class="c999 mag-t-15">{{b_lg[1255]}}</p>
				</div>
				<!--加载-->
				<div class="loading center f-18 mag-b-10" :class="{hide:!isload}">
					<i class="fa fa-spinner fa-pulse"></i>
				</div>
				<!--加载完成之后显示end-->
				<div class="end end3 center c999 pad-10" :class="{hide:!isend}">- end -</div>
			</div>

		</div>

	</body>

	<script type="text/javascript">
		var app = null;

		function refresh() {
			app.init();
		}

		function fun1() {
			setlange_obj(); //加载头部语言包
			down_load();//启动刷新界面
			app = new Vue({
				el: "#app",
				data: {
					list: [], //核销记录列表
					isload: false,
					isend: false,
					total: 0,
					cur_page: 1,
					ajaxing: true,
					b_lg: global_lange, //语言包
					languageStyle:getItem("lg")
				},
				mounted: function() {

				},
				created: function() {
					this.init();
				},
				methods: {
					init: function() {
						this.list = [];
						common_ajax(1, {
							page: 0,
							pagesize: 10
						}, "get_coupon_use_list", function(res) {
							app.total = res.result.total;
							app.getList(); //初始化
							var winH = $(window).height(); //屏幕高度
							window.addEventListener('scroll', function(e) { //滚动事件
								domH = $('body').height(); //内容高度
								if((winH + $(window).scrollTop()) > domH - 10) {
									app.getnextpage();

								}
							}, true)
						})
					},
					getnextpage: function() { //获取下一页数据
						if(this.ajaxing) {
							this.ajaxing = false;
							var curpage = this.cur_page; //赋值给中间变量
							curpage++;
							this.cur_page++;
							if(this.cur_page <= this.total) {
								this.cur_page = curpage;
								this.getList();
							}
						}
					},
					getList: function() {
						//加载列表数据
						this.isload = true;
						common_ajax(1, {
							page: this.cur_page,
							pagesize: 10
						}, "get_coupon_use_list", function(res) {
							if(res.status == 1) {
								$.each(res.result.list, function(i, v) { //i为下标，v为元素
									app.list.push(v);
								});
								if(app.list.length > 0 && app.cur_page == app.total) {
									app.isend = true;
									app.isload = false;
								} else {
									app.ajaxing = true;
									app.isend = false;
									app.isload = false;
								}
							} else {
								mui.toast(res, msg);
							}
						})
					}
				}
			})
		}
	</script>

</html>
